<template>
  <div class="component flex-row">
    <div class="avatars flex-row">
      <my-image 
        v-for="(item, index) in showAvatar"
        :key="index"
        :src="item"
        :round="true"
        width="64rpx"
        height="64rpx"
        :style="{
          left: (index * 44) + 'rpx'
        }"
        />
    </div>
    <div class="text"
      :style="{
        left: textLeft
      }"
      >{{text}}</div>
  </div>
</template>

<script>
import {
  mapState
} from 'vuex'
export default {
  props: {
    avatars: {
      type: Array,
      default: []
    },
    totle: {
      type: Number,
      default: 0
    }
  },
  computed: mapState({
    userAvatar: state => state.userAvatar,
    text() {
      if (this.totle === 0)  {
        return "还没有人到过这里"
      } else {
        return `${this.totle}人来过`
      }
    },
    showAvatar() {
      return this.avatars.length ? this.avatars : [this.userAvatar]
    },
    textLeft() {
      const length = this.showAvatar.length
      return `${length * 64 - (length - 1) * 20 + 30}rpx`
    },
  })
}
</script>

<style lang="less" scoped>
.component {
  .avatars {
    font-size: 0;
    position: relative;
    my-image {
      position: absolute;
    }
  }
  .text {
    position: relative;
    font-size: 24rpx;
    color: #A9A7B8;
  }
}
</style>